<!-- Bubble.vue 消息气泡组件 -->
<template>
	<div class="bubble-container">
		<div class="bubble" :class="{ 'self-bubble': message.isSelf }">
			<div class="text" v-html="handleMessage(message.content)"></div>
		</div>
	</div>
</template>

<script setup>
	import { computed } from 'vue'
	defineProps({
		message: { type: Object, required: true }
	})
	//处理重复嵌套的html标签
	const handleMessage = (str) => {
		let text = str.replace(/<span class="highlight"><\/span>/g, '')
		text = text.replace(/<span class="highlight"><\/span>/g, '')
		return text
	}
</script>

<style scoped>
	.bubble-container {
		display: flex;
		flex-direction: column;
	}

	.bubble {
		padding: 8px 12px;
		border-radius: 5px;
		background: white;
		position: relative;
		max-width: 400px;
	}

	.self-bubble {
		background: #95ec69;
	}

	.bubble::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 12px;
	}

	.bubble:not(.self-bubble)::before {
		left: -6px;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-right: 6px solid white;
	}

	.self-bubble::before {
		right: -6px;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 6px solid #95ec69;
	}

	.text {
		word-break: break-word;
	}
</style>
